<template>
  <div class="ZYF-realtime">
    <div class="content-box">
      <div class="content-top">
        <ul class="ul-class">
          <li class="li-class" @click="statusFn(v.status)" v-for="(v,i) in statusData" :key="i">
            <img :src="v.image" alt />
            <div class="li-center__box">
              <p class="p1">{{v.title}}</p>
            </div>
            <span>{{v.count}}</span>
          </li>
          <li class="li-class" @click="()=>isCarOrTable=!isCarOrTable" style="padding: 0 2%">
            <a-icon style="font-size: 40px;color: #0fceac" type="ordered-list" v-if="isCarOrTable"/>
            <a-icon style="font-size: 40px;color: #0fceac" type="appstore" v-else/>
            <div class="li-center__box">
              <p class="p1">列表切换</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="content-center" v-if="isCarOrTable">
        <template v-for="v in carData">
          <div class="list-box tingyun" v-if="v.status === 'F'" @click="popDetailsFn(v)">
            <img src="@/assets/设备图.png" alt />
            <div class="list-box__right">
              <div class="right-name">
                <img src="@/assets/public/停用小.png" alt />
                <span>{{v.monitorName}}</span>
              </div>
              <div class="address-box hidden2">{{v.monitorName}}</div>
              <div class="address-box hidden2">{{v.companyName}}</div>
              <div class="address-box">
                <p>监测时间:</p>
                <p>{{v.time}}</p>
              </div>
            </div>
          </div>
          <div class="list-box zhengchang" v-else-if="v.status === 'N'" @click="popDetailsFn(v)">
            <img src="@/assets/设备图.png" alt />
            <div class="list-box__right normal-right">
              <div class="right-name">
                <img src="@/assets/public/监测正常小.png" alt />
                <span class="hidden1">{{v.monitorName}}</span>
              </div>
              <div class="address-box hidden2">{{v.monitorName}}</div>
              <div class="address-box hidden2">{{v.companyName}}</div>
              <div class="address-box">
                <p>监测时间:</p>
                <p>{{v.time}}</p>
              </div>
            </div>
          </div>
          <div class="list-box zhongduan" v-else-if="v.status === 'B'" @click="popDetailsFn(v)">
            <img src="@/assets/设备图.png" alt />
            <div class="list-box__right normal-right">
              <div class="right-name">
                <img src="@/assets/public/监测异常小.png" alt />
                <span class="hidden1">{{v.monitorName}}</span>
              </div>
              <div class="address-box hidden2">{{v.monitorName}}</div>
              <div class="address-box hidden2">{{v.companyName}}</div>
              <div class="address-box">
                <p>监测时间:</p>
                <p>{{v.time}}</p>
              </div>
            </div>
          </div>
          <div class="list-box guzhang" v-else-if="v.status === 'D'" @click="popDetailsFn(v)">
            <img src="@/assets/设备图.png" alt />
            <div class="list-box__right normal-right">
              <div class="right-name">
                <img src="@/assets/public/监测报警小.png" alt />
                <span class="hidden1">{{v.monitorName}}</span>
              </div>
              <div class="address-box hidden2">{{v.monitorName}}</div>
              <div class="address-box hidden2">{{v.companyName}}</div>
              <div class="address-box">
                <p>监测时间:</p>
                <p>{{v.time}}</p>
              </div>
            </div>
          </div>
          <div class="list-box chaobiao" v-else @click="popDetailsFn(v)">
            <img src="@/assets/设备图.png" alt />
            <div class="list-box__right normal-right">
              <div class="right-name">
                <img src="@/assets/public/超标2.png" alt />
                <span class="hidden1">{{v.monitorName}}</span>
              </div>
              <div class="address-box hidden2">{{v.monitorName}}</div>
              <div class="address-box hidden2">{{v.companyName}}</div>
              <div class="address-box">
                <p>监测时间:</p>
                <p>{{v.time}}</p>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div class="content-table" v-else>
        <my-table :data-source="carData" :pagination="false" :scroll="{y:'58vh'}" :rowKey="record=> record.id">
          <a-table-column title="序号" align="center" :ellipsis="true" width="100px" :customRender="(text, record, index) =>`${(page.current - 1) *page.size +index +1}`"/>
          <a-table-column title="企业名称" data-index="companyName" align="center" :ellipsis="true" />
          <a-table-column title="监控点名称" data-index="monitorName" align="center" :ellipsis="true" />
          <a-table-column title="监测时间" data-index="time" align="center" :ellipsis="true" />
          <a-table-column title="设备状态" data-index="status" align="center" :ellipsis="true">
              <template slot-scope="status">
                  <span v-if="status == 'N'" class="zhengchang">正常</span>
                  <span v-else-if="status == 'F'" class="tingyun">停运</span>
                  <span v-else-if="status == 'B'" class="zhongduan">中断</span>
                  <span v-else-if="status == 'D'" class="guzhang">故障</span>
                  <span v-else class="chaobiao">超标</span>
              </template>
          </a-table-column>
          <a-table-column key="action" title="操作" align="center">
            <template slot-scope="text,record">
              <span class="handle" @click="popDetailsFn(record)">查看图表</span>
            </template>
          </a-table-column>
        </my-table>
      </div>
      <div class="content-bottom clearfix">
        <div class="page-box">
          <a-pagination :show-total="total => `共 ${total} 条记录`" v-model="page.current" :total="total" :defaultPageSize="page.size" :item-render="itemRender" @change="pagechangeFn" />
        </div>
      </div>
    </div>
    <!-- 图表弹框 -->
    <echartesPop ref="echartsRef" :monitorData="monitorData" :faultData="faultData" :isDate="false"></echartesPop>
  </div>
</template>

<script>
import moment from 'moment';
import echartesPop from "@/views/air/components/echartesPop";
export default {
  name: "OriginalMonitor.vue",
  inject: ["reload"],
  components: {
    echartesPop,
  },
  props:{
    equipmentTypeId:{
      type:[String,Number],
      request:true
    }
  },
  data() {
    return {
      isCarOrTable:true,
      total: 0,
      page: {
        // 分页数据
        current: 1,
        size: 12,
        monitorType: "",
        dataStatus: ""
      },
      monitorData: [], // 警告类型数组
      carData: [],
      statusData: [
        {
          status: "",
          count: 0,
          image: require("@/assets/public/所有.png"),
          title: "总设备"
        },
        {
          status: "N",
          count: 0,
          image: require("@/assets/public/监测正常.png"),
          title: "正常设备",
        },
        {
          status: "B",
          count: 0,
          image: require("@/assets/public/监测异常.png"),
          title: "中断设备",
        },
        {
          status: "F",
          count: 0,
          image: require("@/assets/public/停用.png"),
          title: "停运设备",
        },
        {
          status: "D",
          count: 0,
          image: require("@/assets/public/监测报警.png"),
          title: "故障设备",
        },
        {
          status: "E",
          count: 0,
          image: require("@/assets/public/超标1.png"),
          title: "超标设备",
        }
      ],
      faultData:{},  // 点击单条数据
    };
  },
  methods: {
    statusFn(data) {
      this.page.current = 1;
      this.page.dataStatus = data;
      this.getListData();
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.page.current = page;
      this.getListData();
    },
    // 点击单个设备显示详细信息
    popDetailsFn(record) {
      console.log(record)
      if (record.monitorFactorsPos.length <= 0) {
        this.$message.warning("此设备没有警告信息");
        return;
      }
      this.faultData = record;
      this.$refs.echartsRef.isEcharts = true;
      this.$refs.echartsRef.echartsFrom.mn = record.mn;
      this.$refs.echartsRef.tableFrom.mn = record.mn;
      this.$refs.echartsRef.echartsFrom.sampleType = record.monitorFactorsPos[0].monitorFactorsCode;
      // this.monitorData = record.monitorFactorsPos;
      this.$nextTick(() => {
        this.$refs.echartsRef.init(record.id)
        // this.$refs.echartsRef.getEchartsData();
        // this.$refs.echartsRef.getTableData();
      });
    },
    // 获取数据
    getData() {
      this.$api.getEquipmentStatus(this.equipmentTypeId).then((res) => {
        if (res.data.code == 0) {
          // console.log(res.data)
          let num = 0;
          res.data.data.forEach((v) => {
            num += parseInt(v.count);
            this.statusData.forEach(item=>{
              if (v.status == item.status) {
                item.count = v.count
              }
            })
          });
          this.statusData[0].count = num;
        } else {
          this.$message.warning(
              res.data.errorMessage + "获取设备状态失败！"
          );
        }
      });
    },
    // 获取分页数据
    getListData() {
      this.page.monitorType = this.equipmentTypeId;
      this.$api.postMonitorFindRealData(this.page).then((res) => {
            if (res.data.code == 0) {
              this.carData = res.data.data;
              this.carData.forEach((v) => {
                if (v.monitorFactorsPos && v.monitorFactorsPos.length > 0) {
                  v.time = v.monitorFactorsPos[0].datetime?moment(parseInt(v.monitorFactorsPos[0].datetime)).format("YYYY/MM/DD HH:mm:ss"):"暂无数据";
                } else {
                  v.time = "暂无数据";
                }
              });
              this.total = res.data.total;
            } else {
              this.$message.warning(
                  res.data.errorMessage + "设备列表获取失败！"
              );
            }
          });
    },
  },
  mounted() {
    this.getData();
    this.getListData();
  },
};
</script>

<style scoped lang="scss">
.ZYF-realtime {
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
  .content-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    .content-top {
      width: 100%;
      height: 15%;
      margin-bottom: 6px;
      .ul-class {
        width: 100%;
        height: 100%;
        //background: url(~@/assets/public/监测.png) no-repeat;
        //background-size: 100% 100%;
        background: linear-gradient(#357bbc, #3687c5);
        border-radius: 8px;
        padding: 2% 1%;
        box-sizing: border-box;
        display: flex;
      }
      .li-class {
        width: 33%;
        height: 100%;
        border-left: 1px solid #37ddc0;
        padding: 0 1%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        align-items: center;
        cursor: pointer;
      }
      .li-class:first-child {
        border-left: 0;
      }
      .li-class > img {
        width: 50px;
      }
      .li-class .li-center__box .p1 {
        color: rgba(255, 255, 255, 0.5);
        font-size: 18px;
      }
      .li-class .li-center__box .p2 {
        color: rgba(0, 0, 0, 0.5);
        font-size: 16px;
      }
      .li-class > span {
        color: rgba(255, 255, 255, 0.9);
        font-size: 40px;
      }
    }
    .content-center {
      width: 100%;
      height: 76%;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      .list-box {
        width: 24%;
        height: 32%;
        margin: 0 1.3% 1% 0;
        border: 1px solid #a4574a;
        border-radius: 6px;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
      }
      .list-box:nth-child(4n) {
        margin-right: 0;
      }
      .list-box:nth-child(4n + 1) {
        margin-bottom: 0;
      }
      .zhengchang {
        border: 1px solid #2e9888;
      }

      .guzhang {
        border: 1px solid #aa4a23;
      }

      .chaobiao {
        border: 1px solid #c569ff;
      }

      .zhongduan {
        border: 1px solid #b67a2c;
      }

      .tingyun {
        border: 1px solid #646262;
      }
      .list-box > img {
        width: 45%;
        height: 100%;
      }
      .list-box__right {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
      .normal-right {
        // justify-content: space-around;
      }
      .right-name > img {
        height: 24px;
        vertical-align: middle;
      }
      .right-name > span {
        //color: rgba(255, 255, 255, 0.7);
        line-height: 20px;
        padding-left: 6px;
        vertical-align: middle;
        width: 80%;
        display: inline-block;
      }
      .address-box {
        max-height: 22%;
        font-size: 14px;
        font-weight: 500;
        //color: #207064;
        line-height: 1.4;
      }
    }
    .content-table{
      width: 100%;
      height: 76%;
      .handle{
        color: #1890ff;
        cursor: pointer;
      }
      .zhengchang {
        color: #2e9888;
      }

      .guzhang {
        color: #aa4a23;
      }

      .chaobiao {
        color: #c569ff;
      }

      .zhongduan {
        color: #b67a2c;
      }

      .tingyun {
        color: #646262;
      }
    }



    .content-bottom {
      width: 100%;
      position: absolute;
      right: 0;
      bottom: 2px;
      .page-box {
        float: right;
        display: flex;
        align-items: center;
      }
    }
  }
}

/* 图表 */
.line-echarts {
  width: 100%;
  height: 300px;
}
.echarts-title {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 10px 0;
  box-sizing: border-box;
}
::v-deep.ZYF-realtime .ant-form-item {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

::v-deep.ZYF-realtime .ant-form-item-children {
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

